<template>
  <table id="all-requst">
    <thead>
    <tr>
      <th style="width: 5%">编号</th>
      <th>标题</th>
      <th style="width: 10%">分类</th>
      <th style="width: 16%">标签</th>
      <th style="width: 10%">浏览数</th>
      <th style="width: 10%">点赞数</th>
      <th style="width: 10%">编写日期</th>
      <th style="width: 5%">状态</th>
      <th style="width: 12%" colspan="3">操作</th>
    </tr>
    </thead>

    <tbody>
    <div>
      <span class="msg">{{getMsg()}}</span>
    </div>
    <tr v-for="(blog,index) in dataList" :key="index">
      <td style="width: 5%">{{ blog.articleId }}</td>
      <td>{{ blog.articleTitle }}</td>
      <td style="width: 10%">{{ blog.category.categoryName }}</td>
      <td style="width: 16%;font-size: 14px">{{ getTags(blog.tags) }}</td>
      <td style="width: 10%">{{ blog.articleViews }}</td>
      <td style="width: 10%">{{ blog.articleLikeCount }}</td>
      <td style="width: 10%;font-size: 14px">{{ getTime(blog.articleDate)}}</td>
      <td style="width: 5%;font-size: 14px">{{ getStatus(blog.articleStatus) }}</td>
      <td style="width: 4%"><div class="action" @click="deleteById(blog)">删除</div></td>
      <td style="width: 4%"><div class="action" @click="update(blog)">修改</div></td>
      <td style="width: 4%"><div class="action" @click="publicBlog(blog)">发布</div></td>
    </tr>
    </tbody>
  </table>
  <Loading v-if="isload"/>
  <div class="page">
    <span>所有博客: {{ limitConfig.totalCount }}</span>
    <span>当前页数 {{ limitConfig.pageNo }} 页</span>
  </div>
  <LimitControl @receiveData="receiveData" :config="limitConfig" />
</template>

<script>
import {request} from "../../../axios";
import LimitControl from "../../common/LimitControl";
import Loading from "../../body/message/Loading";
export default {
  name: "BlogTable",
  components:{Loading, LimitControl},
  data(){
    return{
      isload:true,
      isdisable:false,
      msg:'',
      totalCount:0,
      dataList:[],
      currequest:{
        publicblogUrl:'/backend/publicblogdetails/',
        deleteUrl:'/backend/deleteblogdetailsbyid',
        countUrl: '/backend/allarticlecount',
      },
      limitConfig:{
        url:'/backend/articledetailslimit',
        countUrl: '/backend/allarticlecount',
        pageSize:10,
        pageNo:0,
        totalCount:0,
        receiveData:'receiveData',
        isActivePre:true,
        isActiveNxet:true,
      },
    }
  },
  methods:{
    getMsg(){
      if(this.msg!=''){
        setTimeout(()=>{
          this.msg = '';
        },5000)
      }
      return this.msg;
    },
    publicBlog(data){
      if( !confirm("是否确认发布 ["+ data.articleTitle  +"] ？")||data.articleStatus==1)  {
        return;
      }
      request({
        url: this.currequest.publicblogUrl+`/${data.articleId}`,
        method:"GET",
      }).then(res=>{
        this.flush(res.data.status)
      })

    },
    update(data){
      if( !confirm("是否确认修改 ["+ data.articleTitle  +"] ？"))  {
        return;
      }
       this.$router.push({
         name:'EditBlog',
         params:{
           blog: JSON.stringify(data)
         }
       })
    },
    deleteById(item){
      this.isload = true;
      if( !confirm("是否确认删除 ["+ item.articleTitle  +"] ？"))  {
        return;
      }
      request({
        url: this.currequest.deleteUrl+`/${item.articleId}`,
        method:"GET",
      }).then(res=>{
        this.flush(res.data.status)
      })
    },
    check(){
      var totalPage = Math.ceil(this.limitConfig.totalCount/this.limitConfig.pageSize);
      this.limitConfig.isActivePre = this.limitConfig.pageNo==1 ? false : true;
      this.limitConfig.isActiveNxet = this.limitConfig.pageNo >= totalPage  ? false : true;
    },
    preAndNextevent(config) {
      request({
        url: config.url+`/${config.pageNo}/${config.pageSize}`,
        method:'GET'
      }).then(res=>{
        this.isload = false;
        this.dataList =  res.data.dataList;
      }).catch(err=>{
      })
    },
    flush(flag){
      if(flag>=1){
        this.msg = '操作成功';
        this.preAndNextevent(this.limitConfig)
        this.getcount();
      }else{
        this.msg = '操作失败';
      }
    },
    receiveData(data){
      this.isload = false;
      this.dataList = data;
    },
    getcount(){
      request({
        url: this.currequest.countUrl,
        method:'GET',
      }).then(res=>{
        this.limitConfig.totalCount = res.data.count;
        this.check();
      })
    },
    getTags(tags){
      var tagStr="";
      for (let i = 0; i < tags.length; i++) {
         tagStr +="["+ tags[i].tagName+"] ";
      }
      return tagStr
    },
    getTime(time){
      let date = new Date(time);
      let y = date.getFullYear();
      let M = date.getMonth()+1>=10 ? date.getMonth()+1: "0" + (date.getMonth()+1);
      let d = date.getDate()>=10 ? date.getDate(): "0" + date.getDate();
      return y + "-" + M + "-" + d + " ";
    },
    getStatus(status){
      if(status==0){
        return "未发布";
      }else{
        return "已发布";
      }
    }
  },
}
</script>

<style scoped>
.msg{
  color: red;
  font-size: 1.2rem;
}
.page span{
  display: inline-block;
  background-color: #54BC4B;
  font-size: 1rem;
  margin: 0 1rem;
  padding: 0 .5rem;
  border-radius: 0.75rem;
}
table {
  margin-top: 30px;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
  font-family: STKaiti;
  border-collapse: collapse;
  border: 1px dashed white;
}

table tbody {
  display: block;
  min-height: 350px;
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
table tr td:nth-child(9) {
  background-color:#1abc9c;
}
table tr:nth-child(even) {
  background-color: #FFFFFF;
}
table tr:nth-child(odd) {
  background-color: #E6E6FA;
}
table th:nth-child(even) {
  background-color: #DDDDDD;
}

table th:nth-child(odd) {
  background-color: #CCCCFF;
}
th {
  color: white;
  text-align: center;
  font-weight: lighter;
  letter-spacing: 2px;
  border-radius:5px;
}
tr >td:nth-child(2n){
  background-color: #eaffea;
}
tr >td:nth-child(2n+1){
  background-color: #dddddd;
}
tr, td {
  border: 1px dotted #54BC4B;
  height: 30px;
  text-align: center;
}
.action{
  font-weight: bold;
  cursor: pointer;
}
.action:hover{
  transform: scale(1.1);
  text-decoration: underline #ffff00;
}

</style>